<template>
	<my-list-panel class="h100 flex-col p-10" ref="refTable" :total="state.total" :loadFn="loadData">
		<div class="f1 h0">
			<n-grid :x-gap="10" :y-gap="10" cols="2 s:2 m:3 l:4 xl:6 xxl:6" responsive="screen">
				<n-grid-item v-for="item in state.list" :key="item.id">
					<project-items-card :controls="false" :cardData="item" />
				</n-grid-item>
			</n-grid>
		</div>
	</my-list-panel>
</template>

<script setup name="/home">
import { publishPage } from '@/api/website';
import ProjectItemsCard from './project/ProjectItemsCard.vue';

/****************************************** 项目列表 ***********************************************************/
const { state, loadData, refTable } = pageMixin({
	api: { page: publishPage }
});
$store.user.pageHome = true;
</script>

<style lang="scss" scoped>
$contentHeight: 250px;

@include b('items-list') {
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	.list-content {
		position: relative;
		height: $contentHeight;
	}

	.list-pagination {
		display: flex;
		justify-content: flex-end;
		margin-top: 20px;
	}
}
</style>
